---
const priceboxes = [
  {
    popular:false,
    packageName:"精选",
    price:'0',
    subtitle:'省内产品集合中心',
    btn:'立即申请',
    purchaseLink:'/#',
    offerlist: [
      {title: "通用流量 105G"},
      {title: "定向流量 30G"},
      {title: "通话时长 100分钟"},
      {title: "免费申请 包邮到家"},
    ],
  },
  {
    popular:true,
    packageName:"移动",
    price:'0',
    subtitle:'移动沧蕾卡',
    btn:'立即申请',
    purchaseLink:'/#',
    offerlist: [
      {title: "通用流量 50G"},
      {title: "定向流量 30G"},
      {title: "通话时长 0分钟"},
      {title: "免费包邮到家"},
    ],
  },
  {
    popular:false,
    packageName:"电信",
    price:'0',
    subtitle:'电信梦神卡',
    btn:'立即申请',
    purchaseLink:'/#',
    offerlist: [
      {title: "通用流量   0分钟"},
      {title: "A50G定向流量"},
      {title: "30G通话时长"},
      {title: "免费申请 包邮到家"},
    ],
  },
]
---

<!-- ====== 定价部分开始- -->
<section
  id="pricing"
  class="relative z-20 overflow-hidden bg-white dark:bg-dark pt-20 pb-12 lg:pt-[120px] lg:pb-[90px]"
>
  <div class="container">
    <div class="-mx-4 flex flex-wrap">
      <div class="w-full px-4">
        <div class="mx-auto mb-[60px] max-w-[510px] text-center">
          <span class="mb-2 block text-lg font-semibold text-primary">
            Pricing Table
          </span>
          <h2 class="mb-3 text-3xl font-bold text-dark dark:text-white sm:text-4xl md:leading-[1.2] md:text-[40px]">
             运营商官方正品
          </h2>
          <p class="text-base text-body-color dark:text-dark-6">
            运营商直签资源，全网最高佣金！
            大流量+超低月租.
          </p>
        </div>
      </div>
    </div>

    <div class="-mx-4 flex flex-wrap justify-center">
      {priceboxes.map(pricebox => (
        <div class="w-full px-4 md:w-1/2 lg:w-1/3">
          <div
            class={`wow fadeInUp relative z-10 mb-10 overflow-hidden rounded-xl bg-white dark:bg-dark-2 py-10 px-8 shadow-pricing sm:p-12 lg:py-10 lg:px-6 xl:p-14`}
            data-wow-delay=".15s"
          >
            {
              pricebox.popular && (
                <p
                  class="absolute right-[-50px] top-[60px] inline-block -rotate-90 rounded-tl-md rounded-bl-md bg-primary py-2 px-5 text-base font-medium text-white"
                >
                  Recommended
                </p>
              )
            }

            <span
              class={`mb-5 block text-xl font-medium text-dark dark:text-white`}
            >
              {pricebox.packageName}
            </span>
            <h2 class="mb-11 text-4xl font-semibold text-dark dark:text-white xl:leading-[1.21] xl:text-[42px]">
              <span class="text-xl font-medium">￥</span>
              <span class="ml-1 -tracking-[2px]">{pricebox.price}</span>
              <span class="text-base font-normal text-body-color dark:text-dark-6">
                免费申请
              </span>
            </h2>
  
            <div class="mb-[50px]">
              <h5 class="mb-5 text-lg font-medium text-dark dark:text-white">{pricebox.subtitle}</h5>

              <div class="flex flex-col gap-[14px]">
                {pricebox.offerlist.map(item => (
                  <p
                    class={`text-base text-body-color dark:text-dark-6`}
                  >
                    {item.title}
                  </p>
                ))}
              </div>
            </div>

            <a
              href={pricebox.purchaseLink}
              class={`inline-block rounded-md bg-primary py-3 px-7 text-center text-base font-medium text-white transition hover:bg-blue-dark`}
            >
              {pricebox.btn}
            </a>
          </div>
        </div>
      ))}
    </div>
  </div>
</section>
<!-- ====== Pricing Section End -->